<!DOCTYPE html>
<html>
<head>
<title>Fig. 2.41.</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="550"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Clear canvas with a white background
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // --- Drawing parameters ---
  const originX = 100;
  const originY = 400;
  const axisLenX = 350;
  const axisLenY = 320;
  const lineWidth = 2.5;
  const peakX = originX + 200;
  const peakY = originY - 220;

  // --- Set drawing styles ---
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = lineWidth;
  ctx.lineCap = 'round'; // For a smoother hand-drawn look

  // --- Helper function to draw axes with arrowheads ---
  function drawArrow(ctx, fromx, fromy, tox, toy) {
    const headlen = 10; // length of head in pixels
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
  }

  // --- Draw Axes ---
  drawArrow(ctx, originX, originY, originX + axisLenX, originY); // X-axis
  drawArrow(ctx, originX, originY, originX, originY - axisLenY); // Y-axis

  // --- Draw the potential curve v(x) ---
  // The curve is drawn in two parts (using two Bezier curves) for better control over the peak.
  // This ensures the peak is smooth and horizontal.
  ctx.beginPath();
  
  // Part 1: From origin to the peak
  ctx.moveTo(originX, originY);
  const cp1_x = originX + 80;
  const cp1_y = originY - 180;
  const cp2_x = peakX - 80;
  const cp2_y = peakY;
  ctx.bezierCurveTo(cp1_x, cp1_y, cp2_x, cp2_y, peakX, peakY);

  // Part 2: From the peak downwards
  const cp3_x = peakX + 80;
  const cp3_y = peakY;
  const endX = originX + 310;
  const endY = originY + 100;
  const cp4_x = endX - 40;
  const cp4_y = peakY + 150;
  ctx.bezierCurveTo(cp3_x, cp3_y, cp4_x, cp4_y, endX, endY);

  ctx.stroke();

  // --- Draw the dashed line from the peak to the x-axis ---
  ctx.beginPath();
  ctx.setLineDash([5, 5]);
  ctx.lineWidth = 1.5;
  ctx.moveTo(peakX, peakY);
  ctx.lineTo(peakX, originY);
  ctx.stroke();
  ctx.setLineDash([]); // Reset line to solid for subsequent drawings
  ctx.lineWidth = lineWidth; // Reset line width

  // --- Add Labels and Text ---
  
  // Vertical axis label: ν(x)
  ctx.font = "italic 24px 'Times New Roman'";
  ctx.fillText("ν(x)", originX - 55, originY - axisLenY + 30);

  // Horizontal axis label: x₁
  ctx.font = "italic 24px 'Times New Roman'";
  ctx.fillText("x", originX + axisLenX + 5, originY + 8);
  ctx.font = "italic 16px 'Times New Roman'";
  ctx.fillText("1", originX + axisLenX + 18, originY + 14);

  // Label 'b' on the x-axis
  ctx.font = "24px 'Times New Roman'";
  ctx.fillText("b", peakX - 7, originY + 28);

  // Label 'V' to the left of the axes
  ctx.font = "italic 28px 'Times New Roman'";
  ctx.fillText("V", originX - 70, originY);

  // Figure caption
  ctx.font = "20px 'Times New Roman'";
  ctx.textAlign = "center";
  ctx.fillText("Fig. 2.41.", canvas.width / 2, canvas.height - 30);

</script>
</body>
</html>